<template>
	<view class="province-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="navigateBack">
				<text class="back-icon">
					<image src="/static/other/dowen.png" mode=""></image>
				</text>
			</view>
			<view class="title">城市选择</view>
			<view class="right-placeholder"></view>
		</view>

		<!-- 搜索导航 start -->
		<view class="search-top">
			<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入城市" clearButton="none" cancelButton="none"
				v-model="searchKeyword" @confirm="handleSearch" />
		</view>
		<!-- 搜索导航 end -->

		<!-- 标签选择 -->
		<view class="province-tabs">
			<uni-row class="demo-uni-row">
				<uni-col :span="8">
					<view class="demo-uni-col dark" :class="{active: currentTab === 'hot'}" @click="switchTab('hot')">热门城市</view>
				</uni-col>
				<uni-col :span="8">
					<view class="demo-uni-col light" :class="{active: currentTab === 'all'}" @click="switchTab('all')">全部</view>
				</uni-col>
				<uni-col :span="8">
					<!-- <view class="demo-uni-col lightprovince-top-thred" @click="locateMe">找不到我所在的城市</view> -->
				</uni-col>
			</uni-row>
		</view>

		<!-- 城市列表 -->
		<view class="city-list">
			<!-- 热门城市 -->
			<view v-if="currentTab === 'hot'" class="hot-cities">
				<view class="city-grid">
					<view class="city-item" v-for="city in hotCities" :key="city" @click="selectCity(city)">
						{{city}}
					</view>
				</view>
			</view>

			<!-- 全部城市（省份-城市联动） -->
			<view v-else-if="currentTab === 'all'" class="all-cities">
				<!-- 左侧省份列表 -->
				<scroll-view class="province-list" scroll-y>
					<view class="province-item" v-for="province in provinces" :key="province.name"
						:class="{active: selectedProvince === province.name}" @click="selectProvinceHandler(province.name)">
						{{province.name}}
					</view>
				</scroll-view>

				<!-- 右侧城市列表 -->
				<scroll-view class="province-city-list" scroll-y>
					<view v-if="selectedProvince && getCitiesByProvince(selectedProvince).length > 0">
						<view class="city-item" v-for="city in getCitiesByProvince(selectedProvince)" :key="city" @click="selectCity(city)">
							{{city}}
						</view>
					</view>
					<view v-else class="no-cities">
						<text>请选择省份</text>
					</view>
				</scroll-view>
			</view>

			<!-- 搜索结果 -->
			<view v-if="searchKeyword && filteredCities.length > 0" class="search-results">
				<view class="result-title">搜索结果</view>
				<view class="city-item" v-for="city in filteredCities" :key="city" @click="selectCity(city)">
					{{city}}
				</view>
			</view>

			<!-- 无搜索结果 -->
			<view v-if="searchKeyword && filteredCities.length === 0" class="no-results">
				<text>未找到相关城市</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
				// 页面加载时确保selectedProvince有值
				if (!this.selectedProvince || !this.provinceCities[this.selectedProvince]) {
					if (this.provinces.length > 0) {
						this.selectedProvince = this.provinces[0].name;
					} else {
						// console.error('没有省份数据');
					}
				}
				// console.log('当前选中省份:', this.selectedProvince);
			},
		data() {
			return {
				searchKeyword: '',
				currentTab: 'all', // 'hot' 或 'all'
				selectedProvince: '北京市', // 默认选中北京市以确保初始显示
				// 热门城市列表
				hotCities: ['北京市', '上海市', '广州市', '深圳市', '杭州市', '南京市', '武汉市', '长沙市', '重庆市', '成都市'],
				// 省份列表
				provinces: [
					{ name: '北京市', isMunicipality: true },
					{ name: '天津市', isMunicipality: true },
					{ name: '河北省' },
					{ name: '山西省' },
					{ name: '内蒙古自治区' },
					{ name: '辽宁省' },
					{ name: '吉林省' },
					{ name: '黑龙江省' },
					{ name: '上海市', isMunicipality: true },
					{ name: '江苏省' },
					{ name: '浙江省' },
					{ name: '安徽省' },
					{ name: '福建省' },
					{ name: '江西省' },
					{ name: '山东省' },
					{ name: '河南省' },
					{ name: '湖北省' },
					{ name: '湖南省' },
					{ name: '广东省' },
					{ name: '广西壮族自治区' },
					{ name: '海南省' },
					{ name: '重庆市', isMunicipality: true },
					{ name: '四川省' },
					{ name: '贵州省' },
					{ name: '云南省' },
					{ name: '西藏自治区' },
					{ name: '陕西省' },
					{ name: '甘肃省' },
					{ name: '青海省' },
					{ name: '宁夏回族自治区' },
					{ name: '新疆维吾尔自治区' },
					{ name: '台湾省' },
					{ name: '香港特别行政区' },
					{ name: '澳门特别行政区' }
				],
				// 省份对应的城市列表
				provinceCities: {
					'北京市': ['北京市'],
					'天津市': ['天津市'],
					'河北省': ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'],
					'山西省': ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'],
					'内蒙古自治区': ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市'],
					'辽宁省': ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'],
					'吉林省': ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市'],
					'黑龙江省': ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市'],
					'上海市': ['上海市'],
					'江苏省': ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'],
					'浙江省': ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
					'安徽省': ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市'],
					'福建省': ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],
					'江西省': ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'],
					'山东省': ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '临沂市'],
					'河南省': ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市'],
					'湖北省': ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市'],
					'湖南省': ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市'],
					'广东省': ['广州市', '深圳市', '珠海市', '汕头市', '佛山市', '韶关市', '湛江市', '肇庆市', '江门市', '茂名市', '惠州市'],
					'广西壮族自治区': ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市'],
					'海南省': ['海口市', '三亚市', '三沙市', '儋州市'],
					'重庆市': ['重庆市'],
					'四川省': ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市'],
					'贵州省': ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市'],
					'云南省': ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市'],
					'西藏自治区': ['拉萨市', '日喀则市', '昌都市', '林芝市', '山南市', '那曲市'],
					'陕西省': ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'],
					'甘肃省': ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市'],
					'青海省': ['西宁市', '海东市'],
					'宁夏回族自治区': ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
					'新疆维吾尔自治区': ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市'],
					'台湾省': ['台北市', '高雄市', '新北市', '台中市', '台南市'],
					'香港特别行政区': ['香港特别行政区'],
					'澳门特别行政区': ['澳门特别行政区']
				},
				// 搜索过滤后的城市列表
				filteredCities: []
			}
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack()
			},
			// 切换标签
			switchTab(tab) {
				this.currentTab = tab;
				this.searchKeyword = '';
				this.filteredCities = [];
				// 切换到全部时默认选择第一个省份
				if (tab === 'all' && this.provinces.length > 0) {
					this.selectedProvince = this.provinces[0].name;
				}
			},
			// 搜索城市
			handleSearch() {
				if (!this.searchKeyword) {
					this.filteredCities = [];
					return;
				}

				// 过滤城市
				const keyword = this.searchKeyword.toLowerCase();
				const allCities = this.getAllCities();
				this.filteredCities = allCities.filter(city => 
					city.toLowerCase().includes(keyword)
				);
			},
			// 获取所有城市
			getAllCities() {
				let allCities = [];
				// 获取所有省份的城市
				for (const province in this.provinceCities) {
					allCities = allCities.concat(this.provinceCities[province]);
				}
				return allCities;
			},
			// 根据省份获取城市列表
			getCitiesByProvince(province) {
				// 确保province存在并且是有效的
				if (!province || !this.provinceCities[province]) {
					return [];
				}
				return this.provinceCities[province];
			},
			// 选择省份
			selectProvinceHandler(province) {
				this.selectedProvince = province;
			},
			// 选择城市
			selectCity(city) {
				// 存储选择的城市到本地缓存
				uni.setStorageSync('selectedCity', city);
				// 触发城市更新事件，让search-location组件更新显示
				uni.$emit('updateCity', city);
				// 返回上一页
				uni.navigateBack();
			},
			// 定位我的位置
			locateMe() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						const latitude = res.latitude;
						const longitude = res.longitude;
						// 这里应该调用地图API将经纬度转换为城市名称
						// 由于是模拟环境，我们直接设置为北京市
						// 实际项目中应该使用腾讯地图API或其他地图服务
						uni.showLoading({
							title: '定位中...'
						});
						setTimeout(() => {
							uni.hideLoading();
							// 模拟定位到北京市
							this.selectCity('北京市');
						}, 1000);
					},
					fail: (err) => {
						console.error('获取位置失败:', err);
						uni.showToast({
							title: '定位失败，请手动选择城市',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.province-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 75rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.back-btn {
		font-size: 36rpx;
		color: #333;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.right-placeholder {
		width: 30rpx;
	}

	.search-top {
		height: 110rpx;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.province-tabs {
		background-color: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}

	.demo-uni-col {
		text-align: center;
		font-size: 35rpx;
		color: #bebebe;
		padding: 10rpx 0rpx;
	}

	.demo-uni-col.dark.active {
		color: #000;
		font-weight: bold;
		background-color: #f5f5f5;
		    padding: 10rpx 0rpx;
	}

	.demo-uni-col.light.active {
		color: #000;
		font-weight: bold;
		background-color: #f5f5f5;
		    padding: 10rpx 0rpx;
	}

	.lightprovince-top-thred {
		font-size: 28rpx;
		color: #000;
	}

	.city-list {
		padding: 0 20rpx;
	}

	/* 热门城市样式 */
	.hot-cities {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.city-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
	}

	.city-item {
		width: 50%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #333;
	}

	.city-item:active {
		background-color: #f5f5f5;
		border-radius: 8rpx;
	}

	/* 全部城市样式 */
	.all-cities {
		display: flex;
		height: 70vh;
	}

	/* 左侧省份列表样式 */
	.province-list {
		width: 45%;
		background-color: #f5f5f5;
		height: 100%;
		overflow-y: auto;
	}

	.province-item {
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;
	}

	.province-item.active {
		background-color: #fff;
		color: #007aff;
		font-weight: bold;
	}

	/* 右侧城市列表样式 */
	.province-city-list {
		width: 75%;
		padding: 20rpx;
		height: 100%;
		background-color: #fff;
		overflow-y: auto;
	}

	/* 无城市数据提示 */
	.no-cities {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200rpx;
		color: #999;
		font-size: 28rpx;
	}

	/* 搜索结果样式 */
	.search-results {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.result-title {
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #999;
		border-bottom: 1px solid #eee;
	}

	/* 无搜索结果样式 */
	.no-results {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 80rpx 0;
		text-align: center;
		color: #999;
	}
</style>